<template>
  <div class="footer-container">
    <div class="footer-bottom">
      <div class="footer-bottom-left">
        <div class="section-title">
          <span>合作伙伴</span>
        </div>
        <div class="partner-pc">
          <img :src="item" alt="" v-for="(item, index) in imgList" />
        </div>
      </div>
      <div class="footer-bottom-right">
        <div class="section-title">
          <span>联系我们</span>
        </div>
      

        <img src="../assets/xwimg/news.jpg" alt=""  />
        <span>电话:010-67866071</span>
        <span>地址:北京市通州区北京北投台湖产业园2层</span>
      </div>
    </div>
  </div>
  <div class="footer-bottom" style="height: 80px; background-color: #2b2e36; display: flex; flex-direction: column; align-items: center; justify-content: center">
  <p style="color: #aaa; font-size: 15px;">©2015-2025 星网数据</p>
  <div style="width: 35%; display: flex; justify-content: space-between">
    <a 
      href="https://beian.miit.gov.cn/" 
      target="_blank" 
      rel="noopener" 
      style="color: #67f5b1; font-size: 13px; text-decoration: none;"
    >
      京ICP备2024092112号
    </a>
    <a 
      href="https://beian.mps.gov.cn/#/query/webSearch"
      target="_blank"
      rel="noopener"
      style="color: #67f5b1; font-size: 13px; text-decoration: none;"
    >
      京公网安备11011502038596号
    </a>
    <a 
      href="https://tsm.miit.gov.cn/#/home" 
      target="_blank" 
      rel="noopener" 
      style="color: #67f5b1; font-size: 13px; text-decoration: none;"
    >
      增值电信业务经营许可证:京B2-20251656
    </a>
  </div>
</div>

  
</template>

<script setup>
import { ref } from "vue";
import img1 from '../assets/xwimg/cooperative/中国人民大学.jpg'
import img2 from '../assets/xwimg/cooperative/上海财经大学.jpg'
import img3 from '../assets/xwimg/cooperative/中央财经大学.jpg'
import img4 from '../assets/xwimg/cooperative/民生银行.png'
import img5 from '../assets/xwimg/cooperative/商务部.png' 
import img6 from '../assets/xwimg/cooperative/中国果品流通协会.png'
import img7 from '../assets/xwimg/cooperative/中国日杂工业协会.png'
import img8 from '../assets/xwimg/cooperative/中国香料协会.jpg'
import img9 from '../assets/xwimg/cooperative/中国制浆造纸研究院.jpg'
const imgList = [img1, img2, img3, img4, img5, img6, img7, img8, img9]
</script>

<style lang="scss" scoped>
.footer-container {
  display: flex;
  flex-direction: column;
  background-image: url("../assets/xwimg/footerbg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

  .footer-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 20px;
    height: 420px;
  
    .footer-bottom-left {
      .section-title {
        position: relative;
        display: inline-block;
        font-size: 24px;
        color: #333;
        text-align: center;
        margin: 40px auto;
      }
      .section-title::before {
        content: "PARTNER";
        position: absolute;
        top: -5px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 50px;
        color: rgba(0, 0, 0, 0.1);
        white-space: nowrap;
        font-weight: 800;
      }

      display: flex;

      align-items: center;
      flex-direction: column;
      .partner-pc {
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 30px;
        height: 300px;
        img {
          width: 150px;
          height: 50px;
          flex: 0 0 calc(30% - 30px);
          object-fit: contain;
          transition: transform 0.3s; /* 添加悬停动画 */
          &:hover {
            transform: scale(1.05); /* 悬停放大效果 */
          }
        }
      }
    }
    .footer-bottom-right {
      .section-title {
        position: relative;
        display: inline-block;
        font-size: 24px;
        color: #333;
        text-align: center;
        margin: 40px auto;

        &::before {
          content: "Contact Us";
          position: absolute;
          top: -5px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 50px;
          color: rgba(0, 0, 0, 0.1);
          white-space: nowrap;
          font-weight: 800;
        }
      }

      width: 30%;
      display: flex;
      align-items: center; 
      flex-direction: column;
      padding: 0 8%;

      img {
        width: 190px;
        height: 190px;
        margin-bottom: 16px;
       
      }

      span {
        color: #151618b8;
        margin: 5px 0;
        text-align: center; 
        width: 100%;
        max-width: 400px;
      }
    }
  }
}
</style>